/*
// 鼠标移动生成雪花 
参数:
options: {
  fontSize: string    //雪花大小,默认16px
  color: string   //雪花颜色,默认白色        
}
*/

//#region 依赖函数  Ele:元素  css:css样式{}
function setStyle(Ele, css) {
    for (var key in css) {
        Ele.style[key] = css[key];
    };
};
//#endregion

//#region  鼠标雪花构造函数
let SnowflakeCursor = function(options) {
    options = options ? options : {};
    // 将this指向上下文
    for (var key in this.constructor.prototype) {
        this[key] = this[key].bind(this);
    };
    // 初始化
    this._init(options);
    // 绑定事件
    this._bind();
    this._loop()
};
/* 初始化 */
SnowflakeCursor.prototype._init = function(options) {
    // 参数
    this.options = options;
    // 宽
    this.width = window.innerWidth || document.body.clientWidth ||
        document.documentElement.clientWidth;
    // 高
    this.height = window.innerHeight || document.body.clientHeight ||
        document.documentElement.clientHeight;
    // 鼠标坐标
    this.cursor = {
        x: this.width / 2,
        y: this.width / 2
    };
    // 雪花图数组
    this.snows = ["❄️"];
    // 雪花实例数组
    this.snowList = [];
    // 创建一个div追加进body中
    this.parentEle = document.createElement("div");
    this.parentEle.setAttribute("id", "snowsBox")
        // 设置样式
    setStyle(this.parentEle, {
        "width": this.width + "px",
        "height": this.height + "px",
        "position": "absolute",
        "top": "0",
        "letf": "0",
        "overflow": "hidden",
        "pointerEvents": "none",
        "z-index": "9999",
    });
    document.body.appendChild(this.parentEle);
};
/* 绑定事件 */
SnowflakeCursor.prototype._bind = function() {
    document.addEventListener('mousemove', this.mouseMove);
    window.addEventListener('resize', this.windowResize);
};
/* 鼠标移动事件 */
SnowflakeCursor.prototype.mouseMove = function(event) {
    let e = event || window.event;
    this.cursor.x = e.clientX;
    this.cursor.y = e.clientY;
    this.addSnowList(this.cursor.x, this.cursor.y, this.snows[Math.floor(Math.random() * this.snows.length)], this.parentEle);
};
/* 窗口大小改变事件 */
SnowflakeCursor.prototype.windowResize = function() {
    // 宽
    this.width = window.innerWidth || document.body.clientWidth ||
        document.documentElement.clientWidth;
    // 高
    this.height = window.innerHeight || document.body.clientHeight ||
        document.documentElement.clientHeight;
};
/* 添加雪花实例*/
SnowflakeCursor.prototype.addSnowList = function(x, y, snow, Ele) {
    var snowflake = new Snowflake(this.options);
    snowflake.set(x, y, snow, Ele);
    this.snowList.push(snowflake);
};
/* 雪花实例变化*/
SnowflakeCursor.prototype.updateSnowList = function() {
    // 变化
    for (var i = 0; i < this.snowList.length; i++) {
        this.snowList[i].update();
    }
    // 消失
    for (var i = this.snowList.length - 1; i >= 0; i--) {
        if (this.snowList[i].lifeSpan < 0) {
            // this.snowList[i].die();
            this.snowList.splice(i, 1);
        }
    }
};

/* 重绘*/
SnowflakeCursor.prototype._loop = function() {
    requestAnimationFrame(this._loop);
    this.updateSnowList();
};
//#endregion

//#region 单个雪花构造函
let Snowflake = function(options) {
    // 默认参数
    let initParams = {
        "fontSize": "16px",
        "color": "#f1f1f1",
        "position": "absolute",
        "z-index": "10000",
        "will-change": "transform",
        "pointerEvents": "none",
    };
    // 合并参数
    options = Object.assign(initParams, options);
    this.init(options);
};
/* 初始化 */
Snowflake.prototype.init = function(options) {
    // 初始样式
    this.initStyle = options;
};
/* 设置雪花 x,y-->坐标 snow-->雪花图标  Ele:追加进入的元素  */
Snowflake.prototype.set = function(x, y, snow, Ele) {
    this.velocity = {
        x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
        y: (1 + Math.random())
    };
    this.lifeSpan = 120 + Math.floor(Math.random() * 60);
    this.position = {
        x: x - 20,
        y: y - 20
    };
    // 雪花
    this.ele = document.createElement('span');
    this.ele.innerHTML = snow;
    setStyle(this.ele, this.initStyle);
    this.update();
    // 追加到指定元素
    Ele.appendChild(this.ele);
};
/* 雪花变化 */
Snowflake.prototype.update = function() {
    this.position.x += this.velocity.x;
    this.position.y += this.velocity.y;
    this.velocity.x += (Math.random() < 0.5 ? -1 : 1) * 2 / 75;
    this.velocity.y -= Math.random() / 400;
    this.lifeSpan--;
    // 3d转换
    this.ele.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 180) + ") rotate(" +
        (2 * this.lifeSpan) + "deg)";
};
/* 清除雪花 */
Snowflake.prototype.die = function() {
    this.ele.parentNode.removeChild(this.ele);
};
//#endregion


// 导出
export default SnowflakeCursor;